<template>
  <div class="book" ref="bookDiv">
    <div>
      <tiny-carousel height="300px" autoplay   >
      <tiny-carousel-item class="carousel-item-demo"  v-for="item in data.imgs" :key="item">
        <tiny-image :src="item.img" style="height: 100%;"></tiny-image>
      </tiny-carousel-item>
    </tiny-carousel>
    </div>
    <div class="header-style">
      <BookHeader />
    </div>
    <div>
      <BookHot></BookHot>
    </div>
    <div>
      <BookFooter/>
    </div>
    
    <!-- <tiny-container pattern="classic">
      <template #header  >
        <BookHeader />
      </template>
   
      <template #default>
        <BookHot></BookHot>
      </template>

      <template #footer>
        <BookFooter/>
      </template>

    </tiny-container> -->
  </div>
    <!-- <div>
     
      <BookNav />
    </div>
    <div>
      <BookHot></BookHot>
      <BookSearch v-if="store.bookRouter == 'search'" />
      <BookDetail v-if="store.bookRouter == 'detail'" />
      <BookReader v-if="store.bookRouter == 'reader'" />
      <BookType v-if="store.bookRouter == 'type'" />
    </div> -->

</template>

<script setup>
import { ref, onMounted,reactive } from 'vue';
  import { cosSystem } from '@/stores/system';
  import BookNav from './BookNav.vue'; //导航 搜索按钮一起
  import BookHot from './BookHot.vue'; //首页信息
  import BookSearch from './BookSearch.vue'; //搜索页
  import BookDetail from './BookDetail.vue'; //书籍详情
  import BookReader from './BookReader.vue'; //数据阅读
  import BookType from './BookType.vue'; //书籍类型
  import BookHeader from './BookHeader.vue'; //头部导航
  import BookFooter from './BookFooter.vue';//底部
  const store = cosSystem();
  const bookDiv = ref(null);
  const data = reactive({
    imgs:[]
  })
  
  data.imgs =  [
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://static.zongheng.com/upload/recommend/84/e8/84e8b221867fb8a015340f709af694c3.jpeg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://static.zongheng.com/upload/recommend/97/8c/978c73d68036a3d1dc7808a55fee14ed.jpeg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://static.zongheng.com/upload/recommend/f3/77/f377ac10fbd8eae815d3d3606c83794f.jpeg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://static.zongheng.com/upload/recommend/0f/a3/0fa326671e81d25bc7ce3364ced88002.jpeg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://static.zongheng.com/upload/recommend/84/e8/84e8b221867fb8a015340f709af694c3.jpeg',
          url: 'http://www.dm88.me/view/10149.html',
        },
      ]

</script>
<style lang="scss" scoped>
.book{
  font-size: 14px;
}
.header-style{
  position: -webkit-sticky;
  position: sticky;
  top: 0; /* 距顶部的距离 */
  // background-color: white;
  z-index: 1000; /* 确保div在其他内容之上 */
  position: fixed;
  background: #ffffff;
}

</style>
